import {Form, Input, Tree} from "antd";
import menuList from '../../config/menuConfig'
import {useEffect, useState} from "react";

const Item = Form.Item
const AuthForm = ({role,setNewRole}) =>{
    const FormLayout = {
        labelCol: {span: 4},
        wrapperCol: {span: 15},
    }

    console.log('传入的角色值',role)

    const [expandedKeys, setExpandedKeys] = useState([]);
    // tree选中项列表
    const [checkedKeys, setCheckedKeys] = useState(role.menus);
    const [selectedKeys, setSelectedKeys] = useState([]);
    const [autoExpandParent, setAutoExpandParent] = useState(true);

    const [treeData, setTreeData] = useState([])
    const onExpand = (expandedKeysValue) => {
        console.log('onExpand', expandedKeysValue);
        setExpandedKeys(expandedKeysValue);
        setAutoExpandParent(false);
    };
    // 选中子节点回调
    const onCheck = (checkedKeysValue) => {
        console.log('onCheck', checkedKeysValue);
        setCheckedKeys(checkedKeysValue);
        setNewRole(checkedKeysValue)
    };
    // 给父组件获取最新menus
    const getMenus = () => {
        return checkedKeys
    }
    const onSelect = (selectedKeysValue, info) => {
        console.log('onSelect', info);
        setSelectedKeys(selectedKeysValue);
    };

    console.log('整理的menuList',menuList)
    // 整理menuList
    const getMenuList = (menuList) => {
        // console.log('整理的menuList',menuList)
        const res = menuList.map((menu) => ({
            title: menu.label,
            key: menu.key,
            children: menu.children ? getMenuList(menu.children) : null
        }))
        setTreeData(res)
        return res
    }


    useEffect(() => {
        getMenuList(menuList)
    }, []);

    return(
        <Form>

            <Item label={"角色名称"} {...FormLayout}>
                <Input value={role.name} disabled></Input>
            </Item>

            <Item>
                <Tree
                    checkable
                    onExpand={onExpand}
                    // expandedKeys={expandedKeys}
                    autoExpandParent={autoExpandParent} // 默认展开所有子节点
                    onCheck={onCheck} // 点击节点触发回调
                    checkedKeys={checkedKeys}
                    // onSelect={onSelect}
                    // selectedKeys={selectedKeys}
                    treeData={treeData}
                />
            </Item>
        </Form>
    )
}
export default AuthForm